<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="备料计划数量修改" v-model="visible" align-center width="800px" @close="handleClose">
    <vxe-table ref="tableRef" :data="data">
      <vxe-column title="备料单号" :min-width="80">
        <template #default="{ row }">
          {{ row.plan_no }}
        </template>
      </vxe-column>
      <vxe-column title="下单数量" :min-width="80">
        <template #default="{ row }">
          <el-input-number v-model="row.demand_num" controls-position="right" :min="0" :step="1" :precision="0"
            class="w-full" />
        </template>
      </vxe-column>
      <vxe-column title="操作" :min-width="80">
        <template #default="{ rowIndex }">
          <el-button link type="primary" @click="data.splice(rowIndex, 1)">移除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import XEUtils from 'xe-utils'

const load = ref(false)
const visible = ref(false)
const data = ref({})
const cloneData = ref({})

const emit = defineEmits(['close', 'update:modelValue'])

// 打开弹窗
const open = async (list) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  data.value = list
  cloneData.value = XEUtils.clone(list, true)
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const submit = () => {
  data.value = XEUtils.clone(cloneData.value, true)
}

defineExpose({ open, close })
</script>